<template>
  <div class="p-5 max-w-6xl mx-auto min-h-screen bg-gradient-to-br from-slate-50 to-slate-300">
    <div class="bg-white rounded-2xl p-8 mb-8 shadow-xl border border-indigo-100">
      <h1 class="gradient-text text-center text-4xl font-bold mb-5">Vue3 组件生命周期演示</h1>
      <div class="text-slate-600 leading-relaxed">
        <p class="text-lg text-center mb-8 p-4 bg-slate-100 rounded-lg border-l-4 border-blue-500">
          📚 本演示将帮助你理解Vue3中父子组件的渲染顺序和不同生命周期钩子的执行时机。
        </p>

        <div class="bg-amber-50 p-5 rounded-xl mb-6 border-l-5 border-amber-500">
          <h3 class="text-amber-800 mb-4 font-semibold">🎯 使用说明：</h3>
          <ol class="ml-5 space-y-2">
            <li class="mb-2">
              <strong class="text-gray-800">打开浏览器控制台</strong
              >（F12）查看详细的生命周期执行日志
            </li>
            <li class="mb-2">
              <strong class="text-gray-800">观察页面上的生命周期状态</strong
              >，实时了解各钩子的执行情况
            </li>
            <li class="mb-2">
              <strong class="text-gray-800">使用控制按钮</strong>触发不同的生命周期阶段：
              <ul class="mt-2 ml-5 space-y-1">
                <li class="text-gray-600">显示/隐藏组件 → 观察挂载/卸载生命周期</li>
                <li class="text-gray-600">更新数据 → 观察更新生命周期</li>
                <li class="text-gray-600">父子组件交互 → 观察事件传递</li>
              </ul>
            </li>
            <li class="mb-2">
              <strong class="text-gray-800">重点观察控制台日志的顺序</strong>，理解父子组件渲染顺序
            </li>
          </ol>
        </div>

        <div class="bg-sky-50 p-5 rounded-xl border-l-5 border-sky-500">
          <h3 class="text-sky-900 mb-5 font-semibold">🔄 Vue3 生命周期钩子说明：</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="lifecycle-item">
              <strong class="block text-sky-700 text-lg mb-2 font-mono">setup</strong>
              <p class="text-slate-600 text-sm leading-relaxed">
                组合式API的入口，组件实例创建时立即执行
              </p>
            </div>
            <div class="lifecycle-item">
              <strong class="block text-sky-700 text-lg mb-2 font-mono">onBeforeMount</strong>
              <p class="text-slate-600 text-sm leading-relaxed">组件挂载前执行，DOM还未创建</p>
            </div>
            <div class="lifecycle-item">
              <strong class="block text-sky-700 text-lg mb-2 font-mono">onMounted</strong>
              <p class="text-slate-600 text-sm leading-relaxed">
                组件挂载完成，DOM已创建并插入页面
              </p>
            </div>
            <div class="lifecycle-item">
              <strong class="block text-sky-700 text-lg mb-2 font-mono">onBeforeUpdate</strong>
              <p class="text-slate-600 text-sm leading-relaxed">响应式数据变化时，DOM更新前执行</p>
            </div>
            <div class="lifecycle-item">
              <strong class="block text-sky-700 text-lg mb-2 font-mono">onUpdated</strong>
              <p class="text-slate-600 text-sm leading-relaxed">DOM更新完成后执行</p>
            </div>
            <div class="lifecycle-item">
              <strong class="block text-sky-700 text-lg mb-2 font-mono">onBeforeUnmount</strong>
              <p class="text-slate-600 text-sm leading-relaxed">组件卸载前执行，进行清理工作</p>
            </div>
            <div class="lifecycle-item">
              <strong class="block text-sky-700 text-lg mb-2 font-mono">onUnmounted</strong>
              <p class="text-slate-600 text-sm leading-relaxed">组件卸载完成，所有清理工作完成</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 生命周期演示组件 -->
    <LifecycleDemo />

    <!-- 生命周期指南 -->
    <LifecycleGuide />
  </div>
</template>

<script setup lang="ts">
import LifecycleDemo from './components/ParentComponent.vue'
import LifecycleGuide from './components/LifecycleGuide.vue'
// 页面初始化日志
console.log('🏠 [Home] 页面初始化 - 准备展示Vue3生命周期演示')
console.log('💡 请打开控制台观察完整的生命周期执行顺序')
console.log('📋 生命周期执行顺序预览：')
console.log('   1. setup（父） → setup（子） → setup（孙）')
console.log('   2. onBeforeMount（父） → onBeforeMount（子） → onBeforeMount（孙）')
console.log('   3. onMounted（孙） → onMounted（子） → onMounted（父）')
console.log('   注意：挂载阶段是从内向外的！')
</script>

<style scoped lang="scss">
// 复杂渐变色用sass实现
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

// 复杂的hover效果和动画用sass实现
.lifecycle-item {
  @apply bg-white p-4 rounded-lg border border-sky-200 transition-all duration-300;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
}
</style>
